<template>
	<view class="container">
		<view class="introduce-section">
			<view class="title">
				<text class="label">项目名称：</text>
				<text class="value">{{goods.shopName || '-'}}</text>
			</view>
			<view class="title">
				<text class="label">QRCode：</text>
				<text class="value">{{qrCode || '-'}}</text>
			</view>
			<view class="bot-row">
				<view class="label">进度: </view>
				<view class="value">
					<view class="progress-bar">
						<view class="progress-container">
							<view class="progress" :style="{ width: (goods.jindu * 100 || 0) + '%' }">
								{{goods.jindu * 100 || 0}}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bot-row">
				<text class="label">乡镇: </text>
				<text class="value">{{goods.area || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">片区: </text>
				<text class="value">{{goods.pianarea || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">标段: </text>
				<text class="value">{{goods.biaoduan || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">现场负责人: </text>
				<text class="value">{{goods.fuzerenname || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">负责人电话: </text>
				<text class="value">{{goods.shigongPhone || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">施工单位: </text>
				<text class="value">{{goods.shigongdanwei || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">监理: </text>
				<text class="value">{{goods.jianliname || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">监理电话: </text>
				<text class="value">{{goods.jianliPhone || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">监理单位: </text>
				<text class="value">{{goods.jianlidanwei || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">乡镇负责人: </text>
				<text class="value">{{goods.xiangzhenname || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">乡镇负责人电话: </text>
				<text class="value">{{goods.xiangzhenphone || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">村负责人: </text>
				<text class="value">{{goods.cunname || '-'}}</text>
			</view>
			<view class="bot-row">
				<text class="label">村负责人电话: </text>
				<text class="value">{{goods.cunphone || '-'}}</text>
			</view>
		</view>
		<view class="listbox">
			<text>工程进度详情：</text>
			<view class="list-section" v-for="(itemp, indexp) in biaozhunList" :key="indexp">
				<view class="list-section-child">序号：{{ itemp.gongchengXuhao || '-'  }}</view>
				<view class="list-section-child">名称：{{ itemp.gongchengName || '-'  }}</view>
				<view class="list-section-child" v-for="(item, index) in itemp.shopBiaozhunDOSSon" :key="index">
					<view class="list-item">工程项 {{index + 1}}</view>
					<view class="list-item-child">
						<view class="cate-section">
							<text>子项序号：</text>
							<view class="cate-item">{{ item.gongchengXuhao || '-'  }}</view>
						</view>
						<view class="cate-section">
							<text>编号：</text>
							<view class="cate-item">{{ item.gongchengCode || '-'  }}</view>
						</view>
						<view class="cate-section">
							<text>子项：</text>
							<view class="cate-item">{{ item.gongchengName || '-'  }}</view>
						</view>
						<view class="cate-section">
							<text>总量/单位：</text>
							<view class="cate-item">{{ item.gongcheng_count  || '-' }} {{ item.bunit  || '-' }}</view>
						</view>
						<view class="cate-section">
							<text>完成量：</text>
							<view class="cate-item">{{ item.finishValue  || '-' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-bottom" v-if="!userInfo">
			<button class="default" @click="naviageToPage('/pages/public/login')">登录查看详情</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				goods: {},
				spus: [],
				jianliList: [],
				isVip: false,
				specClass: 'none',
				specSelected: [],
				selectedSku: {},
				selectedSkuIndex: -1,
				toggleCallback: undefined,
				shopId: 0,
				biaozhunList: [],
				qrCode: "",
				type: 0, //type 0代表管理员 1代表施工方2代表监理
			}
		},
		onShow() {
			//	this.isVip = this.$api.isVip();
		},
		onLoad(options) {
			const that = this
			that.qrCode = options.qrCode
			if (!that.qrCode) {
				console.log("结果11111", that.qrCode);
				const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
				that.qrCode = that.getUrlSingleParam('qrCode', q) //调用工具函数获取url中传递的参数
			}
			console.log("结果222", that.qrCode);
			uni.showLoading({
				title: '正在加载'
			})
			that.$api.request('admin.userShop', 'qrCodeDetail', {
				qrCode: that.qrCode
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				that.goods = res.data;
				that.getBiaoZhunList(that.goods.id);
				uni.hideLoading()
			})

		},

		methods: {
			getBiaoZhunList(shopId) {
				var that = this;
				that.$api.request('admin.biaozhun', 'getBiaozhunByShopId', {
					shopId: shopId
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.biaozhunList = res.data
					uni.hideLoading()
				})
			},
			/**
			 * 获取当前 URL 单个 GET 查询参数
			 * 入参：要解析的 URL，不传则默认为当前 URL
			 * 返回：一个<key, value>参数对象
			 */
			getUrlSingleParam(key, url = location.search) {
				const reg = new RegExp("(\\?|&)" + key + "=([^&]*)(&|$)");
				const r = url.match(reg);
				if (r != null) {
					return r[2];
					// return unescape(r[2]);//unescape函数显示已经废弃
				}
				return null;
			},
			naviageToPage(url) {
				if (!url) {
					this.$api.msg("开发中~")
					return
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}

	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.btn-bottom {
		position: fixed;
		bottom: 0;
		/* 距离底部的距离，根据需求调整 */
		left: 50%;
		/* 使按钮居中 */
		transform: translateX(-50%);
		z-index: 999;
		/* 确保按钮在最上层 */
		width: 100%;

		button {
			margin: 30upx 50upx;
			font-size: $font-sm;

			.iconfont {
				margin-right: 10upx;
			}
		}
	}

	.address {
		padding: $page-row-spacing;
		display: flex;
		font-size: $font-sm;
		color: $font-color-light;

		image {
			width: $font-lg;
			height: $font-lg;
			margin-left: 32upx;
			margin-right: 20upx;
		}
	}

	/* 标题简介 */
	.introduce-section {
		margin: 0 $page-row-spacing;
		padding: 20upx 0;
		border-top: 1upx solid #fff;
		padding-top: 40upx;

		.title {
			font-size: $font-sm;
			color: $font-color-base;
			display: flex;
			margin-bottom: 10upx;

			.label {
				width: 30%;
			}

			.value {
				width: 70%;
			}
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-base;

			.label {
				width: 30%;
			}

			.value {
				width: 70%;
				display: flex;

				.progress-bar {
					width: 100%;
					height: 60upx;
					display: inline-flex;
				}

				.progress-container {
					width: 100%;
					height: 30upx;
					margin: 15upx 0;
					background-color: #e9e9e9;
					border-radius: 20upx;
					overflow: hidden;
					font-size: $font-pl;
					line-height: 30upx;
					text-indent: 10upx;
				}

				.progress {
					height: 100%;
					color: #fff;
					background-color: $a-color;
					transition: width 0.3s ease-in-out;
				}
			}
		}
	}

	.listbox {
		margin: -20upx $page-row-spacing $page-row-spacing $page-row-spacing;
		
		text {
			color: $font-color-base;
			font-size: $font-sm;
		}
		
		.list-section {
			padding: 20upx;
			margin: 30upx 0;
			background-color: #fff;
			border: 1upx solid #ddd;
		}
		.list-section-child {
			font-size: $font-sm;
			color: $font-color-base;
			font-weight: bold;
		}
		.list-item {
			line-height: 60upx;
			font-size: 28upx;
			font-weight: bold;
			text-align: center;
			border: 1upx solid #eee;
			margin: 20upx 0;
			background-color: #eee;
		}
		
		.cate-section {
			display: flex;
			padding-bottom: 20upx;
			font-weight: normal;
			
			text {
				width: 25%;
			}
		
			.cate-item {
				width: 75%;
			}
		
			/* 原图标颜色太深,不想改图了,所以加了透明度 */
			image {
				width: 126upx;
				height: 126upx;
				margin-bottom: 20upx;
				border-radius: 50%;
				padding: 20upx;
				box-shadow: 4upx 4upx 20upx rgba(0, 0, 0, 0.2);
				background-color: #f5f5f5;
			}
		}
	}
</style>